<template>
  <div class="client">
    <el-card>
      <div class="add">
        <el-button type="primary" size="small" @click="showDialog(1)">新增</el-button>
      </div>
      <el-table
          :data="clients"
          :header-cell-style="{
          background:'#f5f5f6',
          fontWeight: 'bold',
          color:'#000000',
          fontSize:'14px'
        }"
          border>
        <el-table-column
            prop="clientId"
            align="center"
            label="ID"
            width="150">
        </el-table-column>
        <el-table-column
            align="center"
            prop="clientName"
            label="名称"
            width="150">
        </el-table-column>
        <el-table-column
            align="center"
            prop="secret"
            label="密钥">
        </el-table-column>
        <el-table-column
            align="center"
            prop="clientIP"
            label="客户端IP">
        </el-table-column>
        <el-table-column
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"
                       @change="changeStatus(scope.row.clientId)"
                       :active-value="1"
                       :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleRemove(scope.row.clientId)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible">
      <el-card shadow="never">
        <el-form ref="form" :model="client" label-width="80px" :rules="rules">
          <el-input v-model="client.id" v-show="false"></el-input>
          <el-form-item label="名称" prop="name">
            <el-input v-model="client.name"></el-input>
          </el-form-item>
          <el-form-item label="密钥" prop="password">
            <el-input v-model="client.password"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogOk">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {addClient, listClients, notifyClientStatus, removeClient} from "@/api/client";

export default {
  name: "Client",
  data() {
    return {
      clients: [],
      dialogVisible: false,
      dialogTitle: '新增',
      dialogTag: 1, // 1为新增 2为编辑
      client: {},
      rules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        password: [{required: true, message: '密钥不能为空', trigger: 'blur'}]
      }
    }
  },
  methods: {
    handleRemove(id) {
      removeClient(id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.listClient()
        }
      })
    },
    showDialog(tag) {
      if (tag === 1) {
        this.dialogTitle = '新增'
      }
      if (tag === 2) {
        this.dialogTitle = '编辑'
      }
      this.dialogVisible = true
    },
    dialogOk() {
      if (this.dialogTag === 1) {
        this.$refs['form'].validate(validate => {
          if (validate) {
            addClient(this.client).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.client = {}
                this.dialogVisible = false
                this.listClient()
              }
            })
          }
        })

      }
    },
    listClient() {
      listClients().then(res => {
        this.clients = res.data
      })
    },
    changeStatus(clientId) {
      notifyClientStatus(clientId).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      })
    }
  },
  created() {
    this.listClient()
  }
}
</script>

<style lang="scss">
.client {
  width: 98%;

  .add {
    margin-bottom: 14px;

    .el-button {
      background: #1ab394;
    }
  }

  .el-dialog {
    width: 25%;

    .el-card__body {
      padding: 10px;
    }
  }
}

</style>
